<template>
  <div id="cesiumContainer"></div>
</template>
<script setup>
/**
 * 本案例是展示广告牌实体 Billbroad
 */
import * as Cesium from "cesium";
import TOKEN from "@/utils/cesium/token.js";
onMounted(() => {
  Cesium.Ion.defaultAccessToken = TOKEN;
  // 实例化
  const viewer = new Cesium.Viewer("cesiumContainer", {
    // 界面控件 全部关闭
    animation: false, // 左下角的动画控制器组件
    baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
    fullscreenButton: true, // 全屏组件
    vrButton: false, // VR模式
    geocoder: false, // 地理编码（搜索）组件
    homeButton: false, // 首页，点击之后将视图跳转到默认视角
    infoBox: false, // 信息框
    sceneModePicker: false, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
    selectionIndicator: false, //是否显示选取指示器组件
    timeline: false, // 时间轴
    navigationHelpButton: false, // 帮助提示，如何操作数字地球。
    // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
    navigationInstructionsInitiallyVisible: false,
  });
  // 隐藏logo
  viewer._cesiumWidget._creditContainer.style.display = "none";

  var entity = viewer.entities.add({
    // id: "",
    name: "billboard",
    // show: true,
    // description: "",
    // orientation: "",
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    // billboard:new Cesium.BillboardGraphics(options),
    billboard: {
      show: true, // default
      image: "/cesiumData/images/Cesium_Logo_overlay.png", // default: undefined
      scale: 2.0, // default: 1.0
      //像素偏移    type: Cartesian2    default:Cartesian2.ZERO
      pixelOffset: new Cesium.Cartesian2(0, -50),
      //眼睛偏移    type: Cartesian3    default:Cartesian3.ZERO
      eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0),
      // 水平对齐方式  type: HorizontalOrigin  default:HorizontalOrigin.CENTER
      // CENTER 原点在对象的水平中心；LEFT 原点在对象的左侧；RIGHT 原点在对象的右侧
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
      // 垂直对齐方式  type: VerticalOrigin  default:VerticalOrigin.CENTER
      // CENTER 原点位于 BASELINE 和 TOP 之间的垂直中心；BOTTOM 原点在对象的底部；
      // BASELINE 如果对象包含文本，则原点位于文本的基线，否则原点位于对象的底部；TOP 原点在对象的顶部
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // default: CENTER 垂直对齐位置 参考Cesium.VerticalOrigin
      // 获取或设置此广告牌的高度参考    type: HeightReference    default:HeightReference.NONE
      // NONE 位置绝对；CLAMP_TO_GROUND 位置固定在地形上；RELATIVE_TO_GROUND 位置高度是指地形上方的高度
      heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
      // 颜色  type: Color  default:Color.WHITE
      color: Cesium.Color.LIME,
      // 获取或设置以弧度为单位的旋转角度  type: number  default:0
      rotation: Cesium.Math.PI_OVER_FOUR,
      // 获取或设置世界空间中的对齐轴  type:Cartesian3  default:Cartesian3.ZERO
      alignedAxis: Cesium.Cartesian3.ZERO,
      width: 100, // default: undefined
      height: 25, // default: undefined
      // 根据广告牌与相机的距离获取或设置广告牌的近和远缩放属性  type:NearFarScalar
      scaleByDistance: new Cesium.NearFarScalar(10.0, 2.0, 2.0e3, 1.0),
      // 根据广告牌到相机的距离，获取或设置广告牌的近和远半透明属性  type:NearFarScalar
      // translucencyByDistance: new Cesium.NearFarScalar(
      //   1.0e3,
      //   1.0,
      //   1.5e6,
      //   0.5
      // ),
      // 根据广告牌与摄像头的距离，获取或设置广告牌的近像素偏移量和远像素偏移量缩放属性  type:NearFarScalar
      pixelOffsetScaleByDistance: new Cesium.NearFarScalar(
        10.0,
        1.0,
        1.5e6,
        0.0
      ),

      // 设置10米和2000米之间可见  type:DistanceDisplayCondition
      distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
        10.0,
        2.0e3
      ),
      // 获取或设置与相机的距离，在深度处禁用深度测试，例如，以防止剪切地形。
      // 设置为零时，将始终应用深度测试。设置为Number.POSITIVE_INFINITY时，永远不会应用深度测试。
      disableDepthTestDistance: Number.POSITIVE_INFINITY,
    },
  });

  viewer.zoomTo(entity);

  // changeBillboardProperties
  const billboard = entity.billboard;
  billboard.scale = 3.0;
  billboard.color = Cesium.Color.WHITE.withAlpha(0.25);
});
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
